<#ibizinclude>
../@MACRO/CONTROL/LANGBASE.vue.ftl
</#ibizinclude>
<#if ctrl.render??>
${ctrl.render.code}
<#else>
    <div :class='calendarClass<#if ctrl.getPSSysCss?? && ctrl.getPSSysCss()??><#assign singleCss = ctrl.getPSSysCss()> ${singleCss.getCssName()}</#if>'>
    <#if ctrl.getQuickPSDEToolbar?? && ctrl.getQuickPSDEToolbar()??>
      <span class="quick-toolbar">
        <#assign quickToolbar = ctrl.getQuickPSDEToolbar()/>
        <@ibizindent blank=12>
        ${P.getCtrlCode(quickToolbar, 'CONTROL.html').code}
        </@ibizindent>
      </span>
    </#if>
    <#if ctrl.getBatchPSDEToolbar?? && ctrl.getBatchPSDEToolbar()??>
    <span v-if="selections.length > 0" class="batch-toolbar">
      <#assign batchToolbar = ctrl.getBatchPSDEToolbar()/>
      <@ibizindent blank=12>
      ${P.getCtrlCode(batchToolbar, 'CONTROL.html').code}
      </@ibizindent>
    </span>
    </#if>
      <context-menu-container>
<#if ctrl.getCalendarStyle?? && ctrl.getCalendarStyle() == 'TIMELINE'>
        <template>
            <el-timeline>
            <el-timeline-item
                v-for="(item, index) in events"
                :key="item.title+index"
                :color="item.color"
                :timestamp="item.start" 
                placement="top">
                <context-menu :contextMenuStyle="{width: '100%'}" :data="item" :renderContent="renderContextMenu">
                    <el-card @click.native="onEventClick(item,true,$event)" :class="item.className">
                    <#if ctrl.getPSSysCalendarItems()?? >
                    <#list ctrl.getPSSysCalendarItems() as calendarItem>
                        <div v<#if calendarItem_index != 0>-else</#if>-if="<#if calendarItem.getPSLayoutPanel()??>true<#else>false</#if> && item.itemType == '${calendarItem.getItemType()}'">
                        <#if calendarItem.getPSLayoutPanel()??>
                        <#assign panel = calendarItem.getPSLayoutPanel()>
                        <@ibizindent blank=18>
                        ${P.getCtrlCode(panel, 'CONTROL.html').code}
                        </@ibizindent>
                        </#if>
                        </div>
                    </#list>
                        <div v-else>
                            <h4>{{item.title}}</h4>
                            <p>{{$t('app.calendar.from')}} {{item.start}} {{$t('app.calendar.to')}} {{item.end}}</p>
                        </div>
                    </#if>
                    </el-card>
                </context-menu>
            </el-timeline-item>
            </el-timeline>
        </template>
        <#--  <template v-else>
            <span class="app-data-empty">{{ $t('<#if langbase??>${langbase}.nodata</#if>') }}</span>
        </template>  -->
<#else>
        <template>
        <div class="event-legends">
<#if ctrl.getPSSysCalendarItems()??>
  <#list ctrl.getPSSysCalendarItems() as calendarItem>
          <div :class="{'event-lengend':true, '${calendarItem.getItemType()}':true, 'event-disabled':!isShowlegend.${calendarItem.getItemType()}}" @click="legendTrigger('${calendarItem.getItemType()}')">
            <div class="lengend-icon" style="background:${calendarItem.getBKColor()};"></div>
            <span style="color:${calendarItem.getColor()};">${calendarItem.getName()}</span>
          </div>
  </#list>
</#if>
        </div>
        <FullCalendar
          ref="calendar"
          :locale="$i18n.locale"
          height="parent"
          :firstDay="1"
          :eventLimit="true"
          :editable="!isSelectFirstDefault && true"
          :buttonText="buttonText" 
          :header="header"
          :plugins="calendarPlugins"
          :events="searchEvents.bind(_self)"
          :customButtons="{gotoDate: {text: $t('app.calendar.gotoDate'),click: this.openDateSelect.bind(_self)}}"
          :validRange="validRange"
          :defaultDate="defaultDate"
          :eventRender="eventRender.bind(_self)"
          @dateClick="onDateClick.bind(_self)"
          @eventClick="onEventClick.apply(_self, arguments)"
          @eventDrop="onEventDrop.bind(_self)"
          defaultView="dayGridMonth"/>
          <modal v-model="modalVisible" width="250px" :title="$t('app.calendar.dateSelectModalTitle')" class-name='date-select-modal' @on-ok="gotoDate()">
            <el-date-picker style="width: 200px;" v-model="selectedGotoDate" type="date"></el-date-picker>
          </modal>
        </template>
        <#--  <template v-else>
            <span class="app-data-empty">{{ $t('<#if langbase??>${langbase}.nodata</#if>') }}</span>
        </template>  -->
</#if>
      </context-menu-container>
    </div>
</#if>